<template>
  <div>
    <BasicModal
      @register="register"
      title="选择小程序链接跳转页面"
      width="600px"
      :destroyOnClose="true"
      :canFullscreen="false"
      @ok="handleOk"
    >
      <template v-if="routeDownList?.length">
        <RadioGroup v-model:value="value">
          <Radio
            v-for="item in routeDownList"
            :style="radioStyle"
            :value="item.smsRouteUrl"
            :key="item.id"
            >{{ item.name }}</Radio
          >
        </RadioGroup>
      </template>
      <template v-else> 暂无数据 </template>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { RadioGroup, Radio } from 'ant-design-vue';
  import { reactive, ref } from 'vue';
  import { RouteDownList } from '@/api/message/template';
  import { IRouteDownListResult } from '@/api/message/template/type';

  const emit = defineEmits(['ok']);
  const value = ref<string>();
  const radioStyle = reactive({
    display: 'flex',
    height: '30px',
    lineHeight: '30px',
  });

  const [register, { closeModal }] = useModalInner((data: any) => {
    getRouteDownList(data.id);
  });

  const routeDownList = ref<IRouteDownListResult[]>();
  async function getRouteDownList(id: number) {
    let res = await RouteDownList(id);
    routeDownList.value = res;
  }

  // getRouteDownList();

  function handleOk() {
    emit('ok', value.value);
    closeModal();
  }
</script>

<style lang="less" scoped></style>
